<template>
  <view class="order-detail">
    <view class="p-20">
			<u-text text="位置信息" size="18" bold type="info"></u-text>
			<u-gap height="10"></u-gap>
      <view class="post my-card mb-20">
        <view class="send flex items-center gap-20" style="border-bottom: 1px solid #ccc">
          <u-icon :name="sendIcon" size="29"></u-icon>
          <view class="pb-20">
            <u-text :text="orderStore.detail.shop_company_location.address" size="14" blod></u-text>
            <u-text :text="orderStore.detail.shop_company_location.name" type="info"></u-text>
          </view>
          <u-icon
            name="map"
            size="29"
            blod
            color="primary"
            @tap="handleToSendLocation(orderStore.detail)"
          ></u-icon>
        </view>
        <view class="gather flex items-center gap-20 pt-20">
          <u-icon :name="gatherIcon" size="29"></u-icon>
          <view class="pb-20">
            <u-text :text="orderStore.detail.receiver_location.address" size="14" blod></u-text>
            <u-text :text="orderStore.detail.receiver_location.name" type="info"></u-text>
          </view>
          <u-icon
            name="map"
            size="29"
            blod
            color="primary"
            @tap="handleToGatherLocation(orderStore.detail)"
          ></u-icon>
        </view>
      </view>
			<u-text text="物品信息" size="18" bold type="info"></u-text>
			<u-gap height="10"></u-gap>
      <view class="my-card">
        <u-cell-group :border="false">
          <u-cell
            v-for="(item, index) in orderStore.detail.items"
            :key="index"
            :title="item.category"
            :label="item.name"
            :value="item.quantity + item.product_uom"
          ></u-cell>
        </u-cell-group>
        <u-gap height="20"></u-gap>
        <u-steps :current="orderStore.detail.logs.length - 1" direction="column">
          <u-steps-item
            v-for="(log, index) in orderStore.detail.logs"
            :key="index"
            :title="log.name"
            :desc="log.time"
          ></u-steps-item>
        </u-steps>
      </view>
    </view>
  </view>
</template>

<script setup>
  import sendIcon from "@/assets/images/send.png";
  import gatherIcon from "@/assets/images/gather.png";
  import { onShow } from "@dcloudio/uni-app";
  import { useOrderStore } from "@/store/order";

  const props = defineProps({
    id: String,
  });

  const orderStore = useOrderStore();

  function handleToSendLocation(order) {
    uni.navigateTo({
      url: `/pages/map-navigator/map-navigator?id=${order.id}&longitude=${order.shop_company_location.longitude}&latitude=${order.shop_company_location.latitude}`,
    });
  }

  function handleToGatherLocation(order) {
    uni.navigateTo({
      url: `/pages/map-navigator/map-navigator?id=${order.id}&longitude=${order.receiver_location.longitude}&latitude=${order.receiver_location.latitude}`,
    });
  }
  onShow(() => {
    orderStore.fetchOrderDetail({ id: props.id });
  });
</script>

<style lang="scss" scoped></style>
